<template>
  <div class="container">
    <div>已完成{{ isComplete }}/全部{{ list.length }}</div>
    <div v-if="isComplete > 0" class="btn">
      <button @click="clear" @clear='clear'>清除已完成</button>
    </div>
  </div>
</template>

<script>
  import {
    defineComponent,
    ref,
    computed
  } from "vue";
  export default defineComponent({
    name: "NavFooter",
    props: {
      list: {
        type: Array,
        requer: true
      },
    },
    setup(props,ctx) {
      let isComplete = computed(() => {
        //过滤已完成的
        let arr= props.list.filter(item => {
          return item.complete
        })
        return arr.length
      })
      let clear = () => {
        let arr= props.list.filter(item => {
          return item.complete===false
        })
        console.info(arr)
        ctx.emit('clear',arr) 
      };
      return {
        isComplete,
        clear
      };
    },
  });
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    align-items: center;

    .btn {
      margin-left: 10px;
    }
  }
</style>